<template>
  <!-- 顶部地址 -->
  <van-sticky>
    <van-nav-bar title="地址" left-text="返回" left-arrow @click-left="$router.go(-1)" />
  </van-sticky>

  <!-- 地址信息 -->
  <van-address-list v-model="chosenAddressId" :list="list" :disabled-list="disabledList" disabled-text="以下地址超出配送范围"
    default-tag-text="默认" @add="onAdd" @edit="onEdit" />

  <!-- 新增地址 -->
  <van-popup v-model:show="show" v-if="type === 1" position="bottom" :style="{ height: '75%' }">
    <van-address-edit :area-list="areaList" show-delete show-set-default show-search-result
      :search-result="searchResult" :area-columns-placeholder="['请选择', '请选择', '请选择']" @save="onSave" @delete="onDelete"
      @change-detail="onChangeDetail" />
  </van-popup>

  <!-- 编辑地址 -->
  <van-popup v-model:show="show" v-else position="bottom" :style="{ height: '75%' }">
    <van-address-edit :area-list="areaList" show-delete show-set-default show-search-result
      :search-result="searchResult" :isDefault="isDefault" :address-info="addressInfo"
      :area-columns-placeholder="['请选择', '请选择', '请选择']" @save="editSave" @delete="onDelete"
      @change-detail="onChangeDetail" />
  </van-popup>

</template>

<script>
import { showConfirmDialog } from 'vant';
import { areaList } from '@vant/area-data';
import { addressList, defaultAddress, addAddress, updateAddress, deleteAddress } from '../server/address.js'
export default {
  inject: ['reload'],   //引入方法
  data() {
    return {
      list: [],           //存储地址列表信息
      defaultList: [],    //存储默认地址列表
      isSaving: true,
      checkboxGroup: false,   //定义勾选按钮
      type: 1,            //控制是添加地址栏还是编辑地址栏
      chosenAddressId: "",
      areaList,
      show: false,
      disabledList: [
        {
          id: '3',
          name: '王五',
          tel: '1320000000',
          address: '浙江省杭州市滨江区江南大道 15 号',
        },
      ],
      searchResult: [],
      addressInfo: {},
      addressid: -1,
      isDefault: false
    }
  },
  
  created() {
    this.getAddList()
    this.defaultAddList()
  },

  methods: {
    // 请求地址列表信息
    getAddList() {
      let userid = localStorage.getItem('userid')
      addressList({ userid }).then((res) => {
        if (res.code === "200") {
          console.log(res);
          this.list = res.data
          console.log(this.list);
          //在地址栏中显示address  运用模板字符串拼接
          this.list.forEach((item, index) => {
            item.id = index    //选中某一项地址
            item.address = `${item.province}${item.city}${item.county}${item.addressDetail}`
          })
        }
      })
    },

    // 请求默认地址列表信息
    defaultAddList() {
      let userid = localStorage.getItem('userid')
      defaultAddress({ userid }).then((res) => {
        if (res.code === "200") {
          this.defaultList = res.data
        }
      })
    },

    // 显示添加地址栏
    onAdd() {
      this.show = true
      this.type = 1
    },

    // 添加地址
    onSave(content) {
      console.log(33);
      this.show = false
      let userid = localStorage.getItem('userid')
      addAddress({
        addressDetail: content.addressDetail,
        city: content.city,
        county: content.county,
        isDefault: this.isDefault,
        name: content.name,
        province: content.province,
        tel: content.tel,
        userid
      }).then((res) => {
        if (res.code === "200") {
          console.log(res);
          this.reload()
          // this.getAddList()
        }
      })
    },

    // 填充编辑地址栏信息
    onEdit(item) {
      this.show = true
      this.type = 2
      //通过addressInfo对象来填充值
      this.addressInfo = {
        name: item.name,
        tel: item.tel,
        province: item.province,
        city: item.city,
        county: item.county,
        addressDetail: item.addressDetail,
        isDefault: item.isDefault,
        addressid: item.addressid,
      }
      this.addressid = item.addressid
    },

    // 编辑地址并保存
    editSave(content) {
      this.show = false
      let userid = localStorage.getItem('userid')
      //更新地址信息并传给后端更新接口
      updateAddress({
        addressDetail: content.addressDetail,
        addressid: content.addressid,
        city: content.city,
        county: content.county,
        isDefault: content.isDefault,
        name: content.name,
        province: content.province,
        tel: content.tel,
        userid
      }).then((res) => {
        if (res.code === "200") {
          console.log(res);
          this.reload()
          this.chosenAddressId = content.addressid
        }
      })
    },

    //删除地址
    onDelete() {
      this.show = false
      showConfirmDialog({
        message:
          '您确定要删除该地址吗',
      })
        .then(() => {
          deleteAddress({
            addressid: this.addressid
          }).then(res => {
            if (res.code === "200") {
              // this.reload()     //哪里需要就在哪里调用
              console.log(res);
              this.getAddList()
            }
          })
        })
        .catch(() => {
          return
        });
    },


    onChangeDetail(val) {
      if (val) {
        this.searchResult = [
          { name: '黄龙万科中心', address: '杭州市西湖区' },
          { name: '羽生结弦', address: '仙台市' },
          { name: '紫禁城', address: '北京市朝阳区' }
        ];
      } else {
        this.searchResult = [];
      }
    }
  }
}


</script>
<style scoped>
:deep(.van-button) {
  outline: none;
  border: none;
  background-color: red !important;
}

.content {
  padding: 16px 16px 160px;
}

:deep(.van-tag--primary),
:deep(.van-radio__icon--checked .van-icon) {
  background-color: red !important;
}

:deep(.van-button--default) {
  background-color: #fff !important;
  border: 1px solid #EBEDF0 !important;
}


:deep(.van-radio__icon--checked .van-icon) {
  border: none;
}
</style>